<template>
  <div class="dashboard-container" id="app">
    <div class="app-container">
      <el-card shadow="never">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>汽修厂基本信息</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="formInfo">
          <el-form
            :model="formData"
            :rules="rules"
            ref="formData"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="汽修厂全称：" prop="name">
                  <el-input v-model="formData.name" placeholder="请输入汽修厂全称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否为连锁门店：" prop="isChain">
                  <el-radio-group v-model="formData.isChain">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="汽修厂简称：" prop="simpleName">
                  <el-input v-model="formData.simpleName"  placeholder="请输入汽修厂简称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型标签：" prop="typeLab">
                  <el-select v-model="formData.typeLab" placeholder="请选择类型">
                    <el-option
                      v-for="item in state"
                      :key="item.id"
                      :label="item.value"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="联系人：" prop="contactName">
              <el-input v-model="formData.contactName"  placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" prop="contactPhone">
              <el-input v-model="formData.contactPhone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="所属区域：" prop="prov">
              <el-select
                v-model="prov"
                placeholder="请选择省"
                class="selectinputW"
                @change="handleChange"
              >
                <el-option
                  v-for="(item,index) in arr"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >{{item.name}}</el-option>
              </el-select>
              <el-select v-model="city" placeholder="请选择市" class="selectinputW">
                <el-option
                  v-for="(item,index) in cityArr"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >{{item.name}}</el-option>
              </el-select>
              <el-select v-model="district" placeholder="请选择区" class="selectinputW">
                <el-option
                  v-for="(item,index) in districtArr"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                >{{item.name}}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="汽修厂地址：" prop="address">
              <el-input v-model="formData.address" @change.native="handleSearch"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>相关证件</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="formInfo clearfix">
          <div class="finish_room">
            <div class="finish_room2">
              <div class="imgInfo" v-if="formData.businessLicenseUrl" @click="delete_img('businessLicenseUrl')">
                <img :src="formData.businessLicenseUrl" />
                <i class="el-icon-delete" style="display: none"></i>
              </div>
              <div v-else>
                <el-upload
                  :action="$uploadUrl"
                  :data="fullUpType"
                  :class="{disabled: formData.businessLicenseUrl}"
                  :on-success="uploadSuccess"
                  :on-remove="handleRemove"
                  list-type="picture-card"
                >
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span>营业执照附件</span>
              </div>
            </div>
          </div>
          <div class="finish_room">
            <div class="finish_room2">
              <div class="imgInfo" v-if="formData.corporationObverseUrl" @click="delete_img('corporationObverseUrl')">
                <img :src="formData.corporationObverseUrl"  />
                <i class="el-icon-delete"  style="display: none"></i>
              </div>
              <div v-else>
                <el-upload
                  :action="$uploadUrl"
                  :data="fullUpType"
                  :class="{disabled: formData.corporationObverseUrl}"
                  :on-success="uploadCorporation"
                  :on-remove="handleRemove"
                  list-type="picture-card"
                >
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span>法人身份证正面</span>
              </div>
            </div>
          </div>
          <div class="finish_room">
            <div class="finish_room2">
              <div class="imgInfo" v-if="formData.corporationBackUrl"  @click="delete_img('corporationBackUrl')">
                <img :src="formData.corporationBackUrl" />
                <i class="el-icon-delete"  style="display: none"></i>
              </div>
              <div v-else>
                <el-upload
                  :action="$uploadUrl"
                  :data="fullUpType"
                  :class="{disabled: formData.corporationBackUrl}"
                  :on-success="uploadBackImg"
                  :on-remove="handleRemove"
                  list-type="picture-card"
                >
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span>法人身份证背面</span>
              </div>
            </div>
          </div>
        </div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>地图定位</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="mapInfo">
          <dragMap
            @drag="dragMap"
            :MapCityName="prov"
            class="mapbox"
            :address="formData.address"
            ref="dMap"
          ></dragMap>
        </div>
        <div class="formInfo btnBox">
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listDetails } from '@/api/base/theme'
import { getList, getDetails, delData, addData, updateData } from '@/api/store'
import { updatedImg } from '@/filters/index'
import cityApi from '@/api/base/city'
import dragMap from './mapDrag'
export default {
  name: 'app',
  components: {
    dragMap
  },
  data() {
    return {
      prov: '北京',
      city: '北京',
      district: '东城区',
      formData: {
        id: '',
        name: '',
        simpleName: '',
        province: '',
        city: '',
        prov: '',
        type: 1,
        county: '',
        isChain: '1',
        businessLicenseUrl: '',
        corporationObverseUrl: '',
        corporationBackUrl: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入汽修厂全称', trigger: 'blur' }
        ],
        simpleName: [
          { required: true, message: '请输入汽修厂简称', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        prov: [
          { required: true, message: '请选择所属区域', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请填写汽修厂地址', trigger: 'blur' }
        ],
        isChain: [
          { required: true, message: '请选择是否为连锁', trigger: 'change' }
        ],
        typeLab: [
          { required: true, message: '请选择类型标签', trigger: 'change' }
        ]
      },
      cityArr: [],
      arr: cityApi.arrAll,
      districtArr: [],
      dragData: {
        lng: null,
        lat: null,
        address: null,
        nearestJunction: null,
        nearestRoad: null,
        nearestPOI: null
      },
      imgs: '',
      imgPhone: '',
      textTip: '',
      uploadDisabled: false,
      fullUpType: { type: 7, extension: 'img' },
      fileList: [],
      businessLicense: '',
      state: [
        {
          id: 1,
          value: '1类'
        },
        {
          id: 2,
          value: '2类'
        },
        {
          id: 3,
          value: '3类'
        }
      ]
    }
  },
  created() {
    if (this.$route.query.id) {
      getDetails(this.$route.query.id).then(res => {
        this.formData = res.data
        this.formData.prov = res.data.province
        this.prov = res.data.province
        this.formData.isChain = String(res.data.isChain)
      })
    }
  },
  methods: {
    // 业务方法
    handleSave(isSave) {
      let data = {
        ...this.formData
      }
      data.prov = this.prov
      data.province = this.prov
      data.city = this.city
      data.county = this.district
      this.$refs['formData'].validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            await updateData(data).then((res) => {
              if (res.data.message === '操作成功') {
                this.$message({
                  message: '数据添加成功',
                  type: 'success'
                })
                this.$router.back()
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'error'
                })
              }
            })
          } else {
            await addData(data).then((res) => {
              if (res.data.message === '操作成功') {
                // this.$message.success('数据添加成功')
                this.$message({
                  message: '数据添加成功',
                  type: 'success'
                })
                this.$router.back()
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'error'
                })
              }
            })
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    },
    // 删除
    handleDelete(item) {
      this.$confirm('确认删除？')
        .then(ret => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          console.log(ret)
        })
        .catch(ret => {
          console.log(ret)
        })
    },
    handleSearch() {
      this.$refs.dMap.handleSearchaddress()
    },
    handleCancel() {
      this.$router.back()
    },
    dragMap(data) {
      this.dragData = {
        lng: data.position.lng,
        lat: data.position.lat,
        address: data.address,
        nearestJunction: data.nearestJunction,
        nearestRoad: data.nearestRoad,
        nearestPOI: data.nearestPOI
      }
    },
    handleChange() {
      this.$refs.dMap.handleSearch(this.prov)
    },
    updateCity: function() {
      for (var i in this.arr) {
        var obj = this.arr[i]
        if (obj.name === this.prov) {
          this.cityArr = obj.sub
          break
        }
      }
      this.city = this.cityArr[1].name
    },
    updateDistrict: function() {
      for (var i in this.cityArr) {
        var obj = this.cityArr[i]
        if (obj.name === this.city) {
          this.districtArr = obj.sub
          break
        }
      }
      if (
        this.districtArr &&
        this.districtArr.length > 0 &&
        this.districtArr[1].name
      ) {
        this.district = this.districtArr[1].name
      } else {
        this.district = ''
      }
    },
    delete_img(item) {
      this.formData[item] = ''
    },
    handleRemove(file, fileList) {
      this.uploadDisabled = false
    },
    uploadSuccess(obj, file) {
      this.formData.businessLicenseUrl = obj
    },
    uploadCorporation(obj, file) {
      this.formData.corporationObverseUrl = obj
    },
    uploadBackImg(obj, file) {
      this.formData.corporationBackUrl = obj
    }
  },
  beforeMount: function() {
    this.updateCity()
    this.updateDistrict()
    this.formData.prov = this.prov
  },
  watch: {
    prov: function() {
      this.updateCity()
      this.updateDistrict()
      this.formData.prov = this.prov
    },
    city: function() {
      this.updateDistrict()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .disabled{
    display: none;
  }
.alert {
  margin: 10px 0px 0px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.finish_room {
  float: left;
  width: 150px;
  // height: 150px;
  line-height: 50px;
  display: inline-block;
  overflow: hidden;
  // border: 1px dashed #d9d9d9;
  // border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
}

.finish_room2 {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  position: relative;
  .room_img {
    width: 150px;
    height: 150px;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    span {
      position: absolute;
      width: auto;
      height: auto;
      right: 5px;
      bottom: 3px;
    }
  }
  .imgInfo {
    display: flex;
    position: relative;
    width: 150px;
    height: 150px;
    background: #fff;
    border: 1px dashed #c0ccda;
    border-radius: 4px;
    z-index: 9;
    img {
      width: 100%;
      margin: auto;
      align-items: center;
      border-radius: 4px;
    }
    &:hover{
      &::before{
        content: '';
        position: absolute;
        left:0px;
        top:0px;
        text-align: center;
        line-height: 150;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        width: 150px;
        height: 150px;
      }
      & .el-icon-delete{
        position: absolute;
        color:#fff;
        left: calc(50% - 8px);
        top: calc(50% - 8px);
        display: block !important;
      }
    }
  }
}

.room_add_img {
  width: 100px;
  height: 98px;
  line-height: 98px;
  text-align: center;
  span {
    color: #999;
  }
  input {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
  }
}
</style>
